<template>
    <div id="login">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px" class="form">
            <h3 class="title" style="font-size: 25px">登录后台管理系统</h3>

            <el-form-item prop="username" >
                <el-input v-model="form.username"  placeholder="请输入用户名" class="marginTB" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="password" >
                <el-input v-model="form.password" placeholder="请输入用户密码" class="marginTB" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>

            <el-form-item  >
                <el-checkbox v-model="form.rememberMe" class="marginTB rememberMe" >记住我</el-checkbox>
            </el-form-item>

            <el-button type="primary" @click="onSubmit('form')" class="marginTB marginLR" style="width: 100%">登录</el-button>
        </el-form>
    </div>

</template>

<script>
    export default {
        name: "loginVue",
        data() {
            return {
                //登录表单
                form: {
                },
                //校验规则
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入用户密码', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.request.post("/index/user/login",this.form).then(res=>{
                            if (res.code=='200'){
                                localStorage.setItem("user",JSON.stringify(res.data));
                                this.$router.push({path: '/backendFramework/blog'});
                                this.$message({
                                    message: '登录成功',
                                    type: 'success'
                                });
                            }else {
                                this.$message.error(res.data);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }
        }
    }

</script>

<style scoped>

    /deep/.el-form-item__content{
        margin-left: 0px!important;
    }

    /deep/.el-form-item {
        margin-bottom: 15px!important;
    }

    #login{
        background-image: url("../../assets/static/img/login_background.jpg");
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .form{
        width: 17%;
        /*height: 30%;*/
        text-align: center;
        background: white;
        color: black;
        margin: 25px 35px 25px 35px;
        padding: 35px 20px 35px 20px;
        border-radius: 6px;
        box-shadow: #a2a29ead 5px 5px 4px;;
    }

    .title{
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
        font-family: inherit;
    }

    .rememberMe{
        display: inline-block;
        text-align: left;
        width: 100%;
        margin-bottom:20px;
    }






</style>
